<script>
  const header = [
    {name: 'Home', link: '/'},
    {name: 'Collections', link: '/collections'},
    {name: 'Products', link: '/products'},
    {name: 'Blogs', link: '/blogs'},
    {name: 'About', link: '/about'},
    {name: 'Contact', link: '/contact'},
    {name: 'UserInfo', link: '/account/userinfo'},
    {name: 'Wash', link: '/wash'},
    {name: 'Login', link: '/account/login'},
    {name: 'Admin', link: '/admin/dashboard'},
  ];
</script>

<header class="header bg-blue-800 h-14 text-white flex items-center justify-center sticky top-0 z-50">
  <nav>
    <ul class="flex space-x-4">
      {#each header as item}
        <li>
          <a href="{item.link}" class="hover:underline">{item.name}</a>
        </li>
      {/each}
    </ul>
  </nav>
</header>
